{% extends "templates/web.html" %}

{% block title %} Payment {% endblock %}

{%- block header -%}
{% endblock %}

{% block script %}
<script src="https://js.stripe.com/v3/"></script>
<script>{% include "templates/includes/stripe_checkout.js" %}</script>
{% endblock %}

{%- block page_content -%}

<div class="stripe" id="payment-section">
	<div class="col-sm-10 col-sm-offset-2">
		{% if image %}
			<img src={{image}}>
		{% endif %}
		<h4 class="text-center">
			{{description}}
		</h4>
		<form id="payment-form">
			<div class="form-row row">
				<div class="group col-12">
					<div>
						<label>
							<span>{{ _("Name") }}</span>
							<input id="cardholder-name" name="cardholder-name" class="field" placeholder="{{ _('John Doe') }}" value="{{payer_name}}"/>
						</label>
					</div>
				</div>
				<div class="group col-12">
					<div>
						<label>
							<span>{{ _("Email") }}</span>
							<input id="cardholder-email" name="cardholder-email" class="field" placeholder="{{ _('john@doe.com') }}" value="{{payer_email}}"/>
						</label>
					</div>
				</div>
				<div class="group col-12">
					<label>
					<span>{{ _("Card Details") }}</span>
				<div id="card-element" name="card-element" class="field"></div>
				<div id="card-errors" role="alert"></div>
			</label>
			</div>

			</div>
			<button type="submit" class="submit mb-4" id="submit">{{_('Pay')}} {{amount}}</button>
			<div class="outcome text-center">
				<div class="error" hidden>{{ _("An error occured during the payment process. Please contact us.") }}</div>
				<div class="success" hidden>{{ _("Your payment has been successfully registered.") }}</div>
			</div>
		</form>
	</div>
</div>


{% endblock %}
